<template>
  <div>{{ msg }}</div>
  <button @click="say">点我就叫</button>
  <div>{{ state.age }}</div>
  <button @click="state.age++">点我就长一岁</button>
</template>
<script>
// setup中数据默认不是响应式的
import { reactive } from 'vue'

export default {
  // vue3 compositionApi代码的起点
  setup (){
    console.log('我是setup')
    console.log(this)
    const msg = 'vue3好简单啊'

    const say = () => {
      console.log('你别点我,我卡')
    }
    
    // 年龄
    // 利用reactive将对象转换成响应式的
    const state = reactive({
      name: '张三',
      age: 18
    })
    console.log(state)
    return {
      msg,
      state,
      say
    }
  },
  beforeCreate() {
    console.log('我是beforeCreate');
    console.log(this);
  }
}

</script>